<template>
	<div class="login-wrap">
		<div class="ms-title">登录</div>
		<div class="ms-login">
			<el-form ref="loginForm" label-width="0px">
				<el-form-item prop="loginName">
					<el-input type="text" v-model="login.loginName" placeholder="账户"></el-input>
				</el-form-item>
				<el-form-item>
					<el-input type="password" v-model="login.password" placeholder="密码"></el-input>
				</el-form-item>
				<el-checkbox checked>记住密码</el-checkbox>
				<div class="login-btn">
					<el-button type="primary" @click="handleLogin">登录</el-button>
				</div>
			</el-form>
		</div>

	</div>
</template>

<script>
	import cmscommon from '@/utils/cmscommon'
	import interfaces from '@/interfaces'
	import Vue from 'Vue'
	export default {
		data() {
			return {
				login: {
					loginName: 'zhanghb22',
					password: '123456'
				}
			}
		},
		methods: {
			setCookie(token) {
				//存储cookie
			},
			success(data) {
				console.log(data);
				if(data.data.code == 0) {
					//sessionStorage.setItem('access-user', JSON.stringify(this.login));
					/*this.setCookie(data.data.data.token);*/
					localStorage.setItem('userCd',data.data.data.userCd);
					localStorage.setItem('token',data.data.data.token);
					if(data.data.data.initFlag) {
						this.$router.push({
							path: '/updatePassword'
						})
					} else {
						this.$router.push({
							path: '/home'
						})
					}

				} else {
					this.$message({
						message: data.data.code + ":" + data.data.msg,
						type: 'error'
					})
				}
			},
			fail(data) {
				this.$message({
					message: data.response.data.status + ":" + data.response.data.error,
					type: 'error'
				})
			},
			handleLogin: function() {
				console.log("进入登录");
				const _this = this;
				const loginParams = {
					"loginName": _this.login.loginName,
					"password": _this.login.password
				};
				cmscommon.send({
					method: "POST",
					url: interfaces.login,
					data: loginParams
				}).then(this.success).catch(this.fail);

			}
		}
	}
</script>

<style>
	.login-wrap {
		position: relative;
		width: 100%;
		height: 100%;
	}
	
	.ms-title {
		position: absolute;
		top: 50%;
		width: 100%;
		margin-top: -230px;
		text-align: center;
		font-size: 30px;
		color: #fff;
	}
	
	.ms-login {
		position: absolute;
		left: 50%;
		top: 50%;
		width: 300px;
		height: 160px;
		margin: -150px 0 0 -190px;
		padding: 40px;
		border-radius: 5px;
		background: #fff;
	}
	
	.login-btn {
		text-align: center;
	}
	
	.login-btn button {
		width: 100%;
		height: 36px;
	}
</style>